<template>
  <div class="about-team-box">
    <el-container class="about-container">
      <el-aside width="200px" class="about-aside" ref="aside">
        <div v-for="(item,index) in menuList" class="about-menu-item" :key="index" >
          <router-link :to="item.to" >
              {{item.name}}
          </router-link>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AboutTeam",
  data(){
    return{
      menuList:[
        {
          name:"源码",
          to:"/index/about/code",
        },
        {
          name:"团队",
          to:"/index/about/team",
        },
        {
          name:"捐赠",
          to:"",
        },
      ]
    }
  },
  methods:{

  },
  mounted() {

  }
}
</script>

<style scoped lang="less">
  .about-team-box{
    scroll-behavior: smooth;
    .about-aside{
      height: 100vh;
      //background-color: #A3D0C3;
      background-color: #FFFFFF;
      padding: 20px 0;

      .about-menu-item {
        text-decoration: none;
        height: 40px;
        position: relative;

        a {
          position: relative;
          width: 100%;
          display: inline-block;
          color: #1c1c1c;
          font-size: 16PX;
          text-decoration: none;
          font-weight: 600;
          transition: all 0.3s;

          &:hover {
            color: #0F8686;

            &::after {
              position: absolute;
              content: "<";
              top: 10%;
              right: 30%;
              width: 20px;
              height: 20px;
            }
          }

        }


      }
    }
    .about-container{
      height: 100%;
      background-color: white;
    }
  }
</style>